<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
        >
          <el-menu-item index="0">Yisr后台管理</el-menu-item>
          <div class="flex-grow" />
          <el-popconfirm
            width="220"
            confirm-button-text="退出"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否退出登录"
          >
            <template #reference>
              <el-menu-item index="1">
                <img
                  src="../../assets/logo.png"
                  style="width: 25px; height: 25px; border-radius: 10px"
                />
                <div class="userNmae">叶Yisr</div>
              </el-menu-item>
            </template>
          </el-popconfirm>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="300">
          <el-row class="tac">
            <el-col>
              <el-menu
                router
                default-active="1"
                class="el-menu-vertical-demo"
              >
                <el-menu-item v-for="(item) in routerList" :key="item.path" :index="item.path">
                  <el-icon><icon-menu /></el-icon>
                  <span>{{item.meta.title}}</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
            <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent} from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter()
    const routerList = router.getRoutes().filter(v=>v.meta.isShow)
    console.log(routerList)
    return {
        routerList,
    };
  },
});
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
.userNmae {
  font-size: 10px;
  padding: 0 5px;
  color: rgb(27, 143, 219);
}
.el-col {
    height: calc(100vh - 60px);
}
</style>